layui菜鸟教程

您所在的位置:网站首页 layui 组件开发 layui菜鸟教程

layui菜鸟教程

2023-08-08 19:43| 来源: 网络整理| 查看: 265

主要内容

在这里插入图片描述

LayUI 的介绍

​ layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

​ 由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。

​ 官网:https://www.layui.com

​ 官方文档:https://www.layui.com/doc/

LayUI 的特点

(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。

(2)layui是提供给后端开发人员的ui框架,基于DOM驱动。

下载与使用

在 官网首页 下载到 layui 的最新版。目录结构如下:

├─css // css目录 │ │─modules // 模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 核心样式文件 ├─font // 字体图标目录 ├─images // 图片资源目录(目前只有layim和编辑器用到的GIF表情) │─lay // 模块核心目录 │ └─modules // 各模块组件 │─layui.js // 基础核心库 └─layui.all.js // 包含layui.js和所有模块的合并文件

获得 layui 后,将其完整地部署(拷贝到项目中)到你的项目目录,你只需要引入下述两个文件:

./layui/css/layui.css ./layui/layui.js // 提示:如果是采用非模块化方式,此处可换成:./layui/layui.all.js 基本的入门页面 开始使用layui // 模块和回调函数 // 一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; laye


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3